<template>
  <view class="page">
		<view class="header">
			
			<view class="uni-search-bar">
				<uni-search-bar placeholder="搜索科室、医生" cancel-button="none" radius="100"/>
			</view>
		</view>		
		<view class="classify_wrap">
			<!-- 横向分类滚动开始 -->
			<view class="classify_scroll_x">
				<scroll-view scroll-x="true" >
					<view class="segmented-wrap">
						<uni-segmented-control :current="current" :values="classify" @clickItem="onClickItem"styleType="text" activeColor="#CC0000"></uni-segmented-control>				
					</view>
				</scroll-view>
			</view>
			
			<!-- 横向分类滚动结束 -->
			<!-- 分类icon开始 -->
			<view class="classify_icon">
				<uni-icons type="list" size="28" color="#999999" @click="goToGridPage()"></uni-icons>
			</view>
			<!-- 分类icon结束 -->
		 </view>
		<!-- 首页分类显示结束 -->

		<view class="uni-margin-wrap">
			<unicloud-db v-slot:default="{data, loading, error, options}" collection="opendb-banner">
				<view v-if="error">{{error.message}}</view>
				<view v-else>
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
					  <swiper-item v-for="(item, index) in data" :key="item._id">
					    <view class="swiper-item">
					      <image class="banner-image" :src="item.bannerfile.url" mode="aspectFill" :draggable="false" />
					    </view>
					  </swiper-item>
					</swiper>
				</view>
			</unicloud-db>
		</view>
			
			
			<view class="content">
				<view v-if="current === 0">
				<uni-card>
				<view class="vip-wrap">
						<uni-card  margin="0px">
							<uni-grid :column="column" :show-border="false" :square="false">
								<uni-grid-item v-for="(item, index) in vipItem">
									<view class="grid-item-box">
											<image :src="item.icon" style="width: 100rpx; height: 100rpx;" mode="aspectFill"></image>
											<text>{{ item.text }}</text>
									</view>
									</uni-grid-item>
								</uni-grid>
							</uni-card>
						</view>
					</uni-card>
					
				
				
				<uni-card  class="uni-card" >
					<text>初次使用请添加就诊卡</text>
					<button type="primary" @click="add">添加就诊卡</button>
				</uni-card>

				
				<view class="doctorList">
					<uni-section title="医生列表" type="line"><button class="button-box" @click="select">切换视图</button></uni-section>
					<unicloud-db v-slot:default="{data, loading, error, options}" :options="formData" collection="hospital-admin" @load="load">
						<view v-if="error">{{error.message}}</view>
						<view v-else>
							<uni-list :class="{ 'uni-list--waterfall': options.waterfall }">
								<uni-list-item :border="!options.waterfall" class="uni-list-item--waterfall" title="医生名单列表" v-for="(item, index) in data" :key="item._id" :to="'/pages/detail/detail?id='+item._id+'&title='+item.name">
									<template v-slot:header>
									    <view class="uni-thumb shop-picture" :class="{ 'shop-picture-column': options.waterfall }">
									      <image class="slot-image" :src="item.doctorPicture.url" mode="aspectFill"></image>
									    </view>
									</template>
									  <template v-slot:body>
									   <view class="shop">
										<view class="doctorName">
										  <text class="uni-ellipsis-2">{{item.doctorName}}</text>
										</view>
										<view class="author">
										  <text class="uni-tag hot-tag">职称 | {{ item.doctorLevel }}</text>
										  <text>科室 | {{ item.department }}</text>
										  <text>主治 | {{ item.goodat }}</text>
										</view>
										<view class="fee">
										  <!-- <text class="shop-price-text">¥ {{ getYuan(item.cheapPrice) }}</text> -->
										  <text>&nbsp;</text>
										  <text class="fee"> ¥ {{ getYuan(item.fee) }}</text>
										</view>
									   </view>
									  </template>
								</uni-list-item>
							</uni-list>
							<uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" />
						</view>
					</unicloud-db>
				</view>

				
			</view>	
			<view v-show="current === 1">
				<!-- 儿科列表开始 -->
				<view class="doctorList">
					<unicloud-db v-slot:default="{data, loading, error, options}" collection="hospital-admin" where="department=='儿科'">
						<view v-if="error">{{error.message}}</view>
						<view v-else>
							<uni-list>
								<uni-list-item v-for="(item, index) in data">
									<template v-slot:header>
										<view class="slot-box">
											<image class="slot-image" :src="item.doctorPicture.url" mode="widthFix"></image>
										</view>
									</template>
									  <template v-slot:body>
										<view class="doctorName">
										  <text>{{item.doctorName}}</text>
										</view>
										<view class="author">
										  <text>职称 | {{ item.doctorLevel }}</text>
										  <text>科室 | {{ item.department }}</text>
										  <text>主治 | {{ item.goodat }}</text>
										</view>
										<view class="fee">
										  <!-- <text class="shop-price-text">¥ {{ getYuan(item.cheapPrice) }}</text> -->
										  <text>&nbsp;</text>
										  <text class="fee"> ¥ {{ getYuan(item.fee) }}</text>
										</view>
									  </template>
								</uni-list-item>
							</uni-list>
						</view>
					</unicloud-db>
				  </view>

				<!-- 儿科类列表结束 -->
			</view>
				
			<view v-show="current === 2">
				<!-- 内科 -->
				<view class="doctorList">
					<unicloud-db v-slot:default="{data, loading, error, options}" collection="hospital-admin" where="department=='内科'">
						<view v-if="error">{{error.message}}</view>
						<view v-else>
							<uni-list>
								<uni-list-item v-for="(item, index) in data">
									<template v-slot:header>
										<view class="slot-box">
											<image class="slot-image" :src="item.doctorPicture.url" mode="widthFix"></image>
										</view>
									</template>
									  <template v-slot:body>
										<view class="doctorName">
										  <text>{{item.doctorName}}</text>
										</view>
										<view class="author">
										  <text>职称 | {{ item.doctorLevel }}</text>
										  <text>科室 | {{ item.department }}</text>
										  <text>主治 | {{ item.goodat }}</text>
										</view>
										<view class="fee">
										  <!-- <text class="shop-price-text">¥ {{ getYuan(item.cheapPrice) }}</text> -->
										  <text>&nbsp;</text>
										  <text class="fee"> ¥ {{ getYuan(item.fee) }}</text>
										</view>
									  </template>
								</uni-list-item>
							</uni-list>
						</view>
					</unicloud-db>
				  </view>
				<!-- 内科-->
			</view>
			<view v-show="current === 3">
				<!-- 选项卡3的内容 -->
				<!-- 外科 -->
				<view class="doctorList">
					<unicloud-db v-slot:default="{data, loading, error, options}" collection="hospital-admin" where="department=='外科'">
						<view v-if="error">{{error.message}}</view>
						<view v-else>
							<uni-list>
								<uni-list-item v-for="(item, index) in data">
									<template v-slot:header>
										<view class="slot-box">
											<image class="slot-image" :src="item.doctorPicture.url" mode="widthFix"></image>
										</view>
									</template>
									  <template v-slot:body>
										<view class="doctorName">
										  <text>{{item.doctorName}}</text>
										</view>
										<view class="author">
										  <text>职称 | {{ item.doctorLevel }}</text>
										  <text>科室 | {{ item.department }}</text>
										  <text>主治 | {{ item.goodat }}</text>
										</view>
										<view class="fee">
										  <!-- <text class="shop-price-text">¥ {{ getYuan(item.cheapPrice) }}</text> -->
										  <text>&nbsp;</text>
										  <text class="fee"> ¥ {{ getYuan(item.fee) }}</text>
										</view>
									  </template>
								</uni-list-item>
							</uni-list>
						</view>
					</unicloud-db>
				  </view>
			</view>
			<view v-show="current === 4">
				<!-- 选项卡3的内容 -->
				<!-- 妇产科 -->
				<view class="doctorList">
					<unicloud-db v-slot:default="{data, loading, error, options}" collection="hospital-admin" where="department=='妇产科'">
						<view v-if="error">{{error.message}}</view>
						<view v-else>
							<uni-list>
								<uni-list-item v-for="(item, index) in data">
									<template v-slot:header>
										<view class="slot-box">
											<image class="slot-image" :src="item.doctorPicture.url" mode="widthFix"></image>
										</view>
									</template>
									  <template v-slot:body>
										<view class="doctorName">
										  <text>{{item.doctorName}}</text>
										</view>
										<view class="author">
										  <text>职称 | {{ item.doctorLevel }}</text>
										  <text>科室 | {{ item.department }}</text>
										  <text>主治 | {{ item.goodat }}</text>
										</view>
										<view class="fee">
										  <!-- <text class="shop-price-text">¥ {{ getYuan(item.cheapPrice) }}</text> -->
										  <text>&nbsp;</text>
										  <text class="fee"> ¥ {{ getYuan(item.fee) }}</text>
										</view>
									  </template>
								</uni-list-item>
							</uni-list>
						</view>
					</unicloud-db>
				  </view>
			</view>
			<view v-show="current === 5">
				<!-- 选项卡3的内容 -->
				<!-- 眼科 -->
				<view class="doctorList">
					<unicloud-db v-slot:default="{data, loading, error, options}" collection="hospital-admin" where="department=='眼科'">
						<view v-if="error">{{error.message}}</view>
						<view v-else>
							<uni-list>
								<uni-list-item v-for="(item, index) in data">
									<template v-slot:header>
										<view class="slot-box">
											<image class="slot-image" :src="item.doctorPicture.url" mode="widthFix"></image>
										</view>
									</template>
									  <template v-slot:body>
										<view class="doctorName">
										  <text>{{item.doctorName}}</text>
										</view>
										<view class="author">
										  <text>职称 | {{ item.doctorLevel }}</text>
										  <text>科室 | {{ item.department }}</text>
										  <text>主治 | {{ item.goodat }}</text>
										</view>
										<view class="fee">
										  <!-- <text class="shop-price-text">¥ {{ getYuan(item.cheapPrice) }}</text> -->
										  <text>&nbsp;</text>
										  <text class="fee"> ¥ {{ getYuan(item.fee) }}</text>
										</view>
									  </template>
								</uni-list-item>
							</uni-list>
						</view>
					</unicloud-db>
				  </view>
				  
			</view>
			<view v-show="current === 6">
				<!-- 选项卡3的内容 -->
				<!-- 耳鼻喉科 -->
				<view class="doctorList">
					<unicloud-db v-slot:default="{data, loading, error, options}" collection="hospital-admin" where="department=='耳鼻喉科'">
						<view v-if="error">{{error.message}}</view>
						<view v-else>
							<uni-list>
								<uni-list-item v-for="(item, index) in data">
									<template v-slot:header>
										<view class="slot-box">
											<image class="slot-image" :src="item.doctorPicture.url" mode="widthFix"></image>
										</view>
									</template>
									  <template v-slot:body>
										<view class="doctorName">
										  <text>{{item.doctorName}}</text>
										</view>
										<view class="author">
										  <text>职称 | {{ item.doctorLevel }}</text>
										  <text>科室 | {{ item.department }}</text>
										  <text>主治 | {{ item.goodat }}</text>
										</view>
										<view class="fee">
										  <!-- <text class="shop-price-text">¥ {{ getYuan(item.cheapPrice) }}</text> -->
										  <text>&nbsp;</text>
										  <text class="fee"> ¥ {{ getYuan(item.fee) }}</text>
										</view>
									  </template>
								</uni-list-item>
							</uni-list>
						</view>
					</unicloud-db>
				  </view>
			</view>
			<view v-show="current === 7">
				<!-- 选项卡3的内容 -->
				<!-- 口腔科 -->
				<view class="doctorList">
					<unicloud-db v-slot:default="{data, loading, error, options}" collection="hospital-admin" where="department=='口腔科'">
						<view v-if="error">{{error.message}}</view>
						<view v-else>
							<uni-list>
								<uni-list-item v-for="(item, index) in data">
									<template v-slot:header>
										<view class="slot-box">
											<image class="slot-image" :src="item.doctorPicture.url" mode="widthFix"></image>
										</view>
									</template>
									  <template v-slot:body>
										<view class="doctorName">
										  <text>{{item.doctorName}}</text>
										</view>
										<view class="author">
										  <text>职称 | {{ item.doctorLevel }}</text>
										  <text>科室 | {{ item.department }}</text>
										  <text>主治 | {{ item.goodat }}</text>
										</view>
										<view class="fee">
										  <!-- <text class="shop-price-text">¥ {{ getYuan(item.cheapPrice) }}</text> -->
										  <text>&nbsp;</text>
										  <text class="fee"> ¥ {{ getYuan(item.fee) }}</text>
										</view>
									  </template>
								</uni-list-item>
							</uni-list>
						</view>
					</unicloud-db>
				  </view>
			</view>
			<view v-show="current === 8">
				<!-- 选项卡3的内容 -->
				<!-- 皮肤科 -->
				<view class="doctorList">
					<unicloud-db v-slot:default="{data, loading, error, options}" collection="hospital-admin" where="department=='皮肤科'">
						<view v-if="error">{{error.message}}</view>
						<view v-else>
							<uni-list>
								<uni-list-item v-for="(item, index) in data">
									<template v-slot:header>
										<view class="slot-box">
											<image class="slot-image" :src="item.doctorPicture.url" mode="widthFix"></image>
										</view>
									</template>
									  <template v-slot:body>
										<view class="doctorName">
										  <text>{{item.doctorName}}</text>
										</view>
										<view class="author">
										  <text>职称 | {{ item.doctorLevel }}</text>
										  <text>科室 | {{ item.department }}</text>
										  <text>主治 | {{ item.goodat }}</text>
										</view>
										<view class="fee">
										  <!-- <text class="shop-price-text">¥ {{ getYuan(item.cheapPrice) }}</text> -->
										  <text>&nbsp;</text>
										  <text class="fee"> ¥ {{ getYuan(item.fee) }}</text>
										</view>
									  </template>
								</uni-list-item>
							</uni-list>
						</view>
					</unicloud-db>
				  </view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
  export default {
    data() {
      return {
				classify:["主页","儿科","内科","外科","妇产科","眼科","耳鼻喉科","口腔科","皮肤科"],
				current: 0,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				zuanshi:'/static/logo.png',
				number1:3,
				number2:4,
				column:3,
				vipIcon: '/static/tabbar/1.png',
				vipItem: [
					{text: '预约就诊', icon: '/static/tabbar/yiliao.png'},
					{text: '预约挂号', icon: '/static/tabbar/yiyuan.png'},
					{text: '充值缴费', icon: '/static/tabbar/dangan.png'}
					
				],

				collection: 'opendb-mall-goods',
				  // 查询字段，多个字段用 , 分割
				  field: 'goods_thumb,name,goods_tip,tag,goods_price,comment_count,month_sell_count,shop_name',
				  formData: {
					waterfall: false, // 布局方向切换
					status: 'loading', // 加载状态
				  },
				  tipShow: false // 是否显示顶部提示框
			}
		  },
		  created() {
		  				//获取手机状态栏高度
		  				this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		  			},
			onLoad() {},
		  methods: {
				load(data,ended){
					if(ended){
						this.formData.status = 'noMore'
					}
				},
				select() {
					this.formData.waterfall = !this.formData.waterfall;
				},
				getYuan(data){
					let yuan = Math.floor(data / 100)
					let fen = data % 100
					if(fen < 10){
						if(fen == 0){
							fen = "0"
						}else{
							fen = '0' + fen
						}
					} 
					return yuan+'.'+fen
				  },
					onClickItem(e) {
						if (this.current !== e.currentIndex) {
							this.current = e.currentIndex
						}
					},
					goToGridPage(){
						uni.navigateTo({
							url:'/pages/grid/grid'
						})
					},
		  },
			/**
			 * 下拉刷新回调函数
			 */
			onPullDownRefresh() {
				this.formData.status = 'more'
				this.$refs.udb.loadData({clear:true},()=>{
					this.tipShow = true
					clearTimeout(this.timer)
					this.timer = setTimeout(()=>{
						this.tipShow  = false
					},1000)
					uni.stopPullDownRefresh()
				})
			},
			/**
			 * 上拉加载回调函数
			 */
			onReachBottom() {
				this.$refs.udb.loadMore()
			},
		}
</script>

<style lang="scss">
	@import '../../common/uni-ui.scss';

	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}
	.page{
		background-color: #EEEEEE;
	}
	.header{
		display: flex;
		flex-direction: row;
		background-color: #FFFFFF;
	}
	.locationName{
		display: flex;
		flex-direction: row;
		height: 50px;
		line-height: 50px;
		font-size: 12px
	}
	.uni-search-bar{
		width: 780rpx;
		height: 50px;
	}
	.classify_wrap {
		width: 750rpx;
		display: flex;
		flex-direction: row;
	}
	.classify_scroll_x{
		white-space: nowrap;
		width: 650rpx;
		background-color: #FFFFFF;
		margin-top: 5rpx;
		margin-bottom: 8rpx;
	}
	.classify_icon{
		display: flex;
		flex: 1;
		background-color: #FFFFFF;
		margin-left: 3rpx;
		margin-top: 5rpx;
		margin-bottom: 8rpx;
	}
	.segmented-wrap{
		width: 1300rpx;
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 140rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 12rpx;
	}
	.scroll-view-item_selected{
		border-bottom: 2px solid red;
	}
	.uni-margin-wrap{
		margin-top: 5rpx;
	}
	.swiper{
		height: 315rpx;
	}
	.banner-image {
		width: 750rpx;
		height: 315rpx;
	}
	.grid-item-box{
		align-items: center;
		justify-content: center;
		font-size: 13px;
		
		
	}
	.image{
		width: 90px;
		height: 90px;
	}
	// .uni-card{
	// 	align-items: center;
		
	// }
	// .img{
	// 	width:30px ;
	// 	height:30px;
	// }
	.slot-box {
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	}
	.slot-image {
	  display: block;
	  margin-right: 10px;
	  width: 90px;
	  height: 90px;
	}
	.doctorName{
	  font-size: 30rpx;
	  display: -webkit-box;
	  line-height: 1.5em;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 2;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  margin-bottom: 5rpx;
	}
	.doctorLevel{
	  font-size: 24rpx;
	  white-space: nowrap; /* 禁止换行 */
	  overflow: hidden; /* 隐藏溢出内容 */
	  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
	  word-break: break-all; /* 允许在单词内换行 */
	  margin-bottom: 10rpx;
	  color: #666666;
	}
	.fee {
	  display: flex;
	  flex-direction: row;
	  line-height: 24rpx;
	}
	.button-box {
			height: 30px;
			line-height: 30px;
			font-size: 12px;
			background: #007AFF;
			color: #fff;
		}
	.list {
		.uni-list--waterfall {

			/* #ifndef H5 || APP-VUE */
			/* 小程序 编译后会多一层标签，而其他平台没有，所以需要特殊处理一下 */
			::v-deep .uni-list {
				/* #endif */
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				padding: 5px;
				box-sizing: border-box;

				/* #ifdef H5 || APP-VUE */
				 /* h5 和 app-vue 使用深度选择器，因为默认使用了 scoped ，所以样式会无法穿透 */
				::v-deep
				/* #endif */
				.uni-list-item--waterfall {
					width: 50%;
					box-sizing: border-box;

					.uni-list-item__container {
						padding: 5px;
						flex-direction: column;
					}
				}

				/* #ifndef H5 || APP-VUE */
			}

			/* #endif */
		}
	}
	.uni-list--waterfall {
		
		/* #ifndef H5 || APP-VUE */
		 /* 小程序 编译后会多一层标签，而其他平台没有，所以需要特殊处理一下 */
		::v-deep .uni-list {
			/* #endif */
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding: 5px;
			box-sizing: border-box;
		
			/* #ifdef H5 || APP-VUE */
			 /* h5 和 app-vue 使用深度选择器，因为默认使用了 scoped ，所以样式会无法穿透 */
			::v-deep
			/* #endif */
			.uni-list-item--waterfall {
				width: 50%;
				box-sizing: border-box;
		
				.uni-list-item__container {
					padding: 5px;
					flex-direction: column;
				}
			}
		
			/* #ifndef H5 || APP-VUE */
		}
		
		/* #endif */
	}

	.shop {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.shop-picture-column {
		width: 100%;
		height: 170px;
		margin-bottom: 10px;
	}
	.shop-picture {
		width: 110px;
		height: 110px;
	}
	.shop-price {
		margin-top: 5px;
		font-size: 12px;
		color: #ff5a5f;
	}
	.shop-price-text {
		font-size: 16px;
	}
	.uni-ellipsis-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.uni-ellipsis-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.hot-tag {
		background: #ffffff;
		border: none;
		color: #000000;
	}


	
</style>